<template>
  <form>
    <div id="container">
      <div class="content">
        <div class="tit">
          <a>首页</a> &gt; <a>附件下载</a>
        </div>
        <div class="news">
          <div class="news_l">
            <div class="news_select">
              <div class="sel">
                <input type="text" v-model="listQuery.key" id="newsKeyword" placeholder="请输入关键词" class="seltt">
                <input type="button" @click="fetchList" value="搜索" id="bt_SearchNews" class="mit">
              </div>
            </div>
            <div class="newslist2">
              <ul>
                <li v-for="(item,index) in list">
                  <a @click="download(item)">
                    <span class="num">{{index+1}}</span>
                    <h2 class="newsTitle">
                      <a>{{item.name}}</a>
                    </h2>
                    <span class="newstime2">{{item.createdTime}}</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="divPage">
              <div class="pages">
                <el-pagination
                  style="text-align: center;"
                  v-show="total>0"
                  :total="total"
                  :current-page.sync="listQuery.page"
                  :page-size.sync="listQuery.size"
                  layout="sizes,prev,slot,next,jumper"
                  prev-text="上一页"
                  next-text="下一页"
                  @size-change="fetchList"
                  @current-change="fetchList"
                >
                  <span>{{listQuery.page}}/{{ Math.trunc((total+ listQuery.size-1) / listQuery.size)}}</span>
                </el-pagination>
              </div>
            </div>
          </div>
          <div class="news_r">
            <div class="submenu">
              <div class="suntit">附件下载</div>
              <ul>
                <li class="current">
                  <a>
                    <p>附件下载</p>
                  </a>
                </li>
              </ul>
            </div>
            <!-- 推荐招标 -->
            <div class="zhaobiao">
              <a>
                <img src="https://kancha-1258911605.cos.ap-guangzhou.myqcloud.com/front/zhaobiao.jpg">
              </a>
            </div>
            <!-- 推荐招标 -->
          </div>
        </div>
      </div>
    </div>
  </form>

</template>

<script>
import Data from '@/api/data'

export default {
  name: 'Index',
  props:{
    layout: String
  },
  data() {
    return {
      list:[],
      total:0,
      listQuery: {
        page: 1,
        size: 10,
        type:"FUJIAN",
        key: '',
      }
    }
  },
  watch: {
    month: {
    }
  },
  computed: {
  },
  created() {
    this.fetchList()
  },
  methods: {
    download(item) {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", item.value, true)
      xhr.responseType = "blob"
      xhr.onload = ()=>{
        if(xhr.status === 200) {
          var a = document.createElement('a');
          a.href = window.URL.createObjectURL(xhr.response);
          a.download = item.name
          a.click();
        } else {
        }
      }
      xhr.send();

    },
    async fetchList() {
      console.log("请求参数",this.listQuery)
      const res = await Data.get("/dictionary", this.listQuery)
      if (res) {
        this.list = res.list
        this.total = res.total
      }
    },

  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/new_files/bootstrap.min.css";
@import "~@/styles/new_files/iconfont.css";
@import "~@/styles/new_files/comm.css";
@import "~@/styles/new_files/info.css";
.bg {
  width: 100%;
}
.child {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
